<script setup lang="ts">
import { ref, onMounted } from 'vue'
const canvasRef = ref()


// 加载生命周期
onMounted(() => {
    const ctx = canvasRef.value.getContext('2d')
    ctx.font = '30px Arial' //设置字体大小，一定是在之前
    ctx.fillStyle = 'red'
    ctx.fillText('Hello World', 50, 50)
})
</script>


<template>
    <div>
        <canvas width=600 height="600" class="canvas" ref="canvasRef">当前浏览器不支持canvas，请更换浏览器</canvas>
    </div>
</template>


<style scoped>
.canvas{
    width:600px;
    height:600px;
    border: 1px solid #d3d3d3;
    margin:20px
}
</style>